<template>
    <div class="g-sd3 u-scroll n-musicsd f-pr" style="height: 912px;">
        <div class="music-content">
            <h2 class="usersub">
                <router-link to="/my/#/music/artist" class="f-fs1 s-fc0 f-ff1">
                    我的歌手({{ myPlayListData.mySingerCount }})
                </router-link>
            </h2>
            <div class="n-minelst n-minelst-1" :class="index == 0 && isHideMineList ? 'n-minelst-hide':''" style="margin-top: 8px"
                v-for="(item, index) in myPlayListData.playContentList" key="index" >
                <h2 class="f-ff1">
                    <a hidefocus="true" href="javascript:void(0);" class="u-btn u-btn-crt f-fr ">
                        <i>新建</i>
                    </a>
                    <span class="rtitle f-pr">
                        <i class="tri tri1"></i>
                        {{ item.title }}
                        <span class="f-pa f-r-black-icon"
                            style="display: inline-block; width: 8px;height: 8px; background-size: cover;"></span>
                        <span class="f-r-icon-dis-5"></span>
                        (<span class="count">{{ item.count }}</span>)
                    </span>
                </h2>
                <ul class="clear-block" v-for="(subItem, index2) in item.list" key="index2">
                    <li class="z-selected" :data-my-play-list-id="subItem.playListId">
                        <div class="item clear-block">
                            <div class="left">
                                <a class="avatar" hidefocus="true">
                                    <img :src="subItem.imgUrl" :alt="subItem.title">
                                </a>
                            </div>
                            <p class="name f-thide">
                                <a hidefocus="true" href="javascript:void(0)" class="s-fc0" :title="subItem.title">
                                    {{ subItem.title }}
                                </a>
                            </p>
                            <p class="s-fc4 f-thide num">
                                {{ subItem.num }}首
                            </p>
                        </div>
                        <span class="oper hshow" style="display: none;" v-if="!(index == 0 && index2 == 0)">
                            <a href="javascript:void(0)" class="u-icn u-icn-edit" hidefocus="true" title="编辑"></a>
                            <a href="javascript:void(0)" class="u-icn u-icn-delete" hidefocus="true" title="删除"></a>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';

defineProps({
    myPlayListData: Object
})

const isHideMineList = ref(true);
</script>
<style lang="scss" scoped>
.g-sd3 {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.n-musicsd {
    padding-bottom: 50px;
    padding-top: 40px;

    .usersub {
        position: relative;
        height: 36px;
        line-height: 36px;

        a {
            display: block;
            padding: 0 5px 2px 35px;

            &:hover {
                background-color: #eee;
                text-decoration: none;
            }
        }
    }

    .n-minelst-1 {
        margin-top: 5px;
    }

    .n-minelst {
        a {
            &:hover {
                text-decoration: none;
            }

        }

        h2 {
            padding: 0 10px 12px 15px;
            font-size: 14px;
            color: #000;
        }

        .rtitle {
            cursor: pointer;
        }

        .tri {
            display: inline-block;
            vertical-align: middle;
            margin: 0 2px 0 5px;
            cursor: pointer;
            font-size: 0;
            height: 0;
            line-height: 0;
        }

        .tri1 {
            border-color: #ccc transparent transparent;
            border-style: solid dashed dashed;
            border-width: 8px 7px 0;
        }


        li.z-selected {
            background-color: #e6e6e6;

            &:hover {
                background-color: #e6e6e6;
            }
        }

        li {
            position: relative;
            zoom: 1;
            height: 42px;
            padding: 6px 0 6px 20px;
        }

        ul * {
            cursor: pointer;
            vertical-align: middle;
        }

        .item {
            padding-left: 50px;
        }

        .left {
            display: inline;
            float: left;
            margin-left: -50px;
            overflow: hidden;
            width: 40px;

            .avatar {
                display: block;
                position: relative;
                width: 40px;
                height: 40px;

                .img {
                    width: 40px;
                    height: 40px;
                }
            }
        }

        .name {
            width: 150px;
            overflow: hidden;
            margin-top: 2px;
            margin-bottom: 8px;

            a {
                white-space: nowrap;
            }
        }

        .num {
            width: 130px;
        }

        .oper {
            position: absolute;
            bottom: 7px;
            right: 0;

            .u-icn {
                float: left;
                margin-right: 10px;
            }
        }
    }

    .n-minelst-hide {
        .tri1 {
            border: 8px solid #ccc;
            border-color: transparent transparent transparent #ccc;
            border-style: dashed dashed dashed solid;
            margin-right: 0;
        }

        ul {
            display: none;
        }

    }
}
</style>